import { useMemo, useState } from "react";
import styles from "./index.module.less";
import SearchBox from "@/components/SearchBox";
import { TABS, getSearchOptions, getTableColumns, BOOK_STATUS } from "./constant";
import { Modal, Tabs, message, Button } from "antd";
import SuperTable from "@/components/SuperTable";
import cs from "classnames";
import { deleteBook, updateBookStatus, getBookList } from "@/api/modules/bookshelf";
import { RESULT_CODES } from "@/api/helper/ResultCode";
import useUrl from "@/hooks/useUrl";
import { map } from "lodash";

export default () => {
	const { navigate } = useUrl();
	const [params, setParams] = useState({});
	const [tabValueInfo, setTabValueInfo] = useState<any>({
		status: "all"
	});

	const handleSearch = (e: any) => {
		setParams(e);
	};

	const handleRequest = async (params: any, sortInfo: any) => {
		const requestData: any = {
			limit: params.pageSize,
			page: params.current,
			book_name: params?.book_name ?? "",
			book_author: params?.book_author ?? "",
			book_status: params?.status && params?.status !== "all" ? params?.status : ""
		};

		const res = await getBookList(requestData);
		return {
			total: res?.total ?? 0,
			data: res?.data ?? []
		};
	};

	const items = TABS;

	const edit = {
			label: "编辑",
			value: "edit"
		},
		contentEnum = {
			label: "录入",
			value: "content"
		},
		suspendEnum = {
			label: "下架",
			value: "suspend"
		},
		rackEnum = {
			label: "上架",
			value: "rack"
		},
		deleteEnum = {
			label: "删除",
			value: "delete"
		};

	const newColumns = [
		...getTableColumns({ params }),
		{
			title: "操作",
			width: 250,
			fixed: "right",
			dataIndex: "action-render",
			onClick: (key: string, record: any) => {
				switch (key) {
					case "edit":
						navigate(`/bookshelf/add?book_id=${record.book_id}`, { state: record });
						break;
					case "content":
						navigate(`/bookshelf/content?book_id=${record.book_id}`, { state: record });
						break;
					case "suspend":
						Modal.confirm({
							icon: null,
							title: "停用提示？",
							content: `确认下架${record?.book_name}吗？`,
							closable: true,
							onOk: c => {
								updateBookStatus({ book_id: record?.book_id, book_status: BOOK_STATUS.draft }).then((res: any) => {
									if (res?.code === RESULT_CODES.SUCCESS) {
										message.success("下架成功");
										c?.();
										setParams(e => ({
											...e,
											timeStamp: Date.now()
										}));
									}
								});
							}
						});
						break;
					case "rack":
						Modal.confirm({
							icon: null,
							title: "停用提示？",
							content: `确认上架${record?.book_name}吗？`,
							closable: true,
							onOk: c => {
								updateBookStatus({ book_id: record?.book_id, book_status: BOOK_STATUS.already }).then((res: any) => {
									if (res?.code === RESULT_CODES.SUCCESS) {
										message.success("上架成功");
										c?.();
										setParams(e => ({
											...e,
											timeStamp: Date.now()
										}));
									}
								});
							}
						});
						break;
					case "delete":
						Modal.confirm({
							icon: null,
							title: "删除提示？",
							content: `确认删除${record?.book_name}吗？`,
							closable: true,
							onOk: c => {
								deleteBook({ book_id: record?.book_id }).then((res: any) => {
									if (res?.code === RESULT_CODES.SUCCESS) {
										message.success("删除成功");
										c?.();
										setParams(e => ({
											...e,
											timeStamp: Date.now()
										}));
									}
								});
							}
						});
						break;
				}
			},
			options: (record: any) => {
				if (record.book_status === BOOK_STATUS.already) {
					return [edit, contentEnum, suspendEnum, deleteEnum];
				} else {
					return [edit, contentEnum, rackEnum, deleteEnum];
				}
			}
		}
	];

	const handleGoCreatePage = () => {
		navigate("/bookshelf/add");
	};

	const NEW_SEARCH_COLUMNS = useMemo(() => {
		return getSearchOptions(tabValueInfo);
	}, []);

	return (
		<div
			className={cs({
				[styles.container]: true
			})}
		>
			<Tabs
				items={items}
				defaultActiveKey="discount"
				activeKey={tabValueInfo.status}
				onChange={e => {
					setTabValueInfo({
						status: e
					});
					setParams({});
				}}
			/>
			<SearchBox key={tabValueInfo.status} columns={NEW_SEARCH_COLUMNS} onSearch={handleSearch}>
				<></>
			</SearchBox>
			{/* <Button onClick={handleGoCreatePage}>新增书籍</Button> */}

			<SuperTable
				params={{
					...params,
					...tabValueInfo
				}}
				// bordered
				rowKey="code"
				columns={newColumns}
				request={handleRequest}
				scroll={{ x: "900" }}
			/>
		</div>
	);
};
